<template>
    <div id="home">
        <nav-bar class="home-nav"><template v-slot:center><div>购物街</div></template></nav-bar>
        <home-swiper :banners="banners"></home-swiper>
        <recommend-view :recommends="recommends"></recommend-view>
        <feature-view/>
        <tab-control class="tab-control" :titles="['流行', '新款', '精选']"></tab-control>
    </div>
</template>

<script>
    /*公共组件*/
    import NavBar from "../../components/common/navbar/NavBar";
    import TabControl from "../../components/content/tabControl/TabControl";

    /*子组件*/
    import HomeSwiper from "./ChildComps/HomeSwiper";
    import RecommendView from "./ChildComps/RecommendView";
    import FeatureView from "./ChildComps/FeatureView";

    /*方法*/
    import {getHomeMultidata, getHomeGoods} from "../../network/home";

    export default {
        name: "Home",
        components: {
            NavBar,
            TabControl,
            HomeSwiper,
            RecommendView,
            FeatureView
        },
        data() {
            return {
                banners: [],
                recommends: [],
                goods: {
                    'pop': {page: 0, list: []},
                    'new': {page: 0, list: []},
                    'sell': {page: 0, list: []},
                }
            }
        },
        created() {
            // 请求数据
            this.getHomeMultidata()

            /*请求商品数据*/
           this.getHomeGoods('pop')
            this.getHomeGoods('new')
            this.getHomeGoods('sell')
        },
        methods: {
            getHomeMultidata() {
                getHomeMultidata().then(res => {
                    // console.log(res);
                    this.banners = res.data.banner.list;
                    this.recommends = res.data.recommend.list;
                })
            },
            getHomeGoods(type) {
                const page = this.goods[type].page + 1
                getHomeGoods(type, page).then(res => {
                    this.goods[type].list.push(...res.data.list)
                    this.goods[type].page += 1
                })
            }
        }
    }
</script>

<style scoped>
    #home {
        padding-top: 44px;
        padding-bottom: 49px;
    }
    .home-nav {
        background-color: var(--color-tint);
        color: #fff;

        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9;
    }
    .tab-control {
        position: sticky;
        top: 44px;
    }
</style>